<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Registration</title>

    <!--引入公共的-->
    <div th:include="common :: commonheader"></div>
</head>

<body class="login-body">

<div class="container">

    <form class="form-signin" th:action="@{/register}" method="post">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">注册</h1>
            <img src="images/login-logo.png" alt=""/>
        </div>

        <div class="login-wrap">
            <p>填入注册信息</p>
            <label id="msg" th:text="${msg}" style="color: red"></label>
            <input type="text" autofocus="" id="username" name="username" th:value="${username}" placeholder="用户名" class="form-control">
            <input type="password" autofocus="" id="password" name="password" th:value="${password}" placeholder="密码" class="form-control">
            <input type="password" autofocus="" id="confirmPassword" th:value="${password}" placeholder="确认密码" class="form-control">
            <input type="text" autofocus="" id="email" name="email" th:value="${email}" placeholder="邮箱" class="form-control">
            <div class="radios">
                <label for="radio-01" class="label_radio col-lg-6 col-sm-6">
                    <input type="radio" th:checked="${gender0}" value="男" id="radio-01" name="gender"> 男
                </label>
                <label for="radio-02" class="label_radio col-lg-6 col-sm-6">
                    <input type="radio" th:checked="${gender1}" value="女" id="radio-02" name="gender"> 女
                </label>
            </div>
            <input id="code" placeholder="验证码" name="inputKaptcha" type="text" class="form-control-code"
                   style="width:140px">
            <!-- 验证码 显示 -->
            <img src="/captcha" style="height: 50px; width: 140px;" id="captcha" onclick="getvCode()" />

            <button type="submit" id="register" class="btn btn-lg btn-login btn-block">
                <i class="fa fa-check"></i>
            </button>

            <div class="registration">
                已经注册？
                <a th:href="@{/}" class="">
                    登录
                </a>
            </div>

        </div>

    </form>

</div>


<!-- Placed js at the end of the document so the pages load faster -->

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script type="text/javascript">
    $(function () {
        // 处理注册
        $("#register").click(function () {
            // 用户名正则
            // 1.获取用户名输入框里的内容
            let username = $("#username").val();
            // 2.创建正则表达式对象
            let usernamePatt = /^\w{5,20}$/;
            // 3.使用test方法验证
            if (!usernamePatt.test(username)) {
                // 4.提示用户结果
                $("#msg").text("用户名不合法！");
                // 防止提交
                return false;
            }
            // 验证密码
            // 验证密码：必须由字母，数字组成，并且长度为 5 到 12 位
            // 1.获取用户名输入框里的内容
            let password = $("#password").val();
            // 2.创建正则表达式对象
            var passwordPatt = /^\w{5,20}$/;
            // 3.使用test方法验证
            if (!passwordPatt.test(password)) {
                // 4.提示用户结果
                $("#msg").text("密码不合法！");
                // 防止提交
                return false;
            }
            // 确认密码
            let confirmPassword = $("#confirmPassword").val();
            if (confirmPassword !== password) {
                $("#msg").text("前后密码不一致！");
                return false;
            }
            // 邮箱正则
            let emailpatt = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            // 获取邮箱
            let email = $("#email").val();
            if (!emailpatt.test(email)) {
                // 提示邮箱不合法
                $("#msg").text("邮箱不合法");
                // 防止提交
                return false;
            }
            // 处理验证码
            if ($("#code").val() === ""){
                $("#msg").text("验证码为空！");
                // 防止提交
                return false;
            }
            $("#msg").text("");
        });

    });

    // 点击验证码切换功能
    function getvCode() {
        document.getElementById("captcha").src="/captcha?t="+new Date().getTime();;
    }
</script>
</body>
</html>
